<template>
    <div>
        <ls-dialog
            title="选择风格"
            width="900px"
            top="20vh"
            @confirm="onConfirm"
        >
            <div slot="trigger">
                <slot name="trigger"></slot>
            </div>
            <el-scrollbar
                class="ls-scrollbar"
                style="height: 500px;"
            >
                <div class="style-select">
                    <el-radio-group v-model="select">
                        <div class="flex flex-wrap">
                            <div
                                class="item text-center"
                                v-for="(item, index) in data"
                                :key="index"
                            >
                                <div
                                    class="item-img flex col-center m-b-20"
                                    @click="select=item.value"
                                >
                                    <img
                                        :src="item.img"
                                        alt=""
                                    >
                                </div>
                                <el-radio :label="item.value">{{item.text}}</el-radio>
                            </div>
                        </div>
                    </el-radio-group>
                </div>
            </el-scrollbar>
        </ls-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import LsDialog from '@/components/ls-dialog.vue'
@Component({
    components: {
        LsDialog,
    },
})
export default class StyleSelect extends Vue {
    /** S data **/
    @Prop() value!: number
    @Prop() data!: any[]
    /** E data **/
    select = 0
    /** S watch **/
    @Watch('value', { immediate: true })
    valueChange(val: number) {
        this.select = val
    }
    /** E watch **/

    /** S methods **/
    onConfirm() {
        this.$emit('input', this.select)
    }
    /** E methods **/
}
</script>
<style lang="scss" scoped>
.style-select {
    .item {
        .item-img {
            width: 260px;
            height: 180px;
            background: #f9f9f9;
            padding: 0 15px;
            margin-right: 20px;
            cursor: pointer;
            img {
                width: 100%;
            }
        }
    }
}
</style>
